<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--需求信息-->
			<view class="detail-item">
				<uni-section title="需求信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">需求编号：<text>{{info.number}}</text></view>
					<view class="detail-text">采购单号：<text>{{info.orderNumber}}</text></view>
					<view class="detail-text">仓库名称：<text>{{info.warehouseName}}</text></view>
					<view class="detail-text">发起时间：<text>{{info.createTime}}</text></view>
					<view class="detail-text">审核时间：<text>{{info.confirmTime}}</text></view>
					<view class="detail-text">分派时间：<text>{{info.allotTime}}</text></view>
					<view class="detail-text">需求状态：<uni-tag size="small" :text="arrText(allStatusList, info.status)" /></view>
					<view class="detail-text">采购说明：<text>{{info.remark}}</text></view>
				</view>
			</view>
			
			<!--仓库商品-->
			<view class="detail-item" v-if="checkPermi(['zhouyz:purchaseDemandProduct:list'])">
				<uni-section title="仓库商品" type="line"></uni-section>
				<view class="detail-form">
					<uni-forms ref="searchRef" label-width="160rpx">
						<uni-forms-item label="仓库名称">
							<uni-data-select
								v-model="purchaseDemandWarehouseId"
								placeholder="请选择仓库名称"
								@change="changeWarehouse"
								:localdata="purchaseDemandWarehouseList"></uni-data-select>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="detail-content table">
					<ty-table
						:data="warehouseProductTableList"
						:columns="warehouseProductColumns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						:rowClassName="() => 'table-row'"
						stripe
						border>
						<template v-slot:before="{ row }">
							<view class="table-td-before table-cell table-td-row">
								<view class="table-td-row">
									商品名称：
									<text class="table-td-text">{{row.productName}}</text></view>
								<view class="table-td-row">
									批次号：
									<text class="table-td-text">{{row.batchNumber}}</text></view>
							</view>
						</template>
					</ty-table>
				</view>
			</view>
			
			<!--商品清单-->
			<view class="detail-item" v-if="checkPermi(['zhouyz:purchaseDemandProduct:list'])">
				<uni-section title="商品清单" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="demandProductTableList"
						:columns="demandProductColumns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						:rowClassName="() => 'table-row'"
						stripe
						border>
					</ty-table>
				</view>
				<!--分页-->
				<view class="pagination" v-show="total > 0">
					<ty-pagination
						:total="total"
						:pageSize="pageSize"
						:currentPage="pageNum"
						:pageSizes="[10, 20, 30, 50]"
						mode="simple"
						layout="first,prev,page,next,last"
						@sizeChange="sizeChange"
						@change="pageChange">
					</ty-pagination>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { purchaseDemandDetail, purchaseDemandWarehouse, purchaseDemandProduct } from "@/api/erp_api/purchase"
import { storageProduct } from "@/api/erp_api/storageProduct"
import { purchaseDemandStatus } from "@/api/system/dict/data"
import { copyText, arrText } from '@/utils/ty.js';
import useUserStore from '@/store/modules/user'

	const userStore = useUserStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getPurchaseDemandWarehouse()
			await getPurchaseDemandStatus()
			getDetail()
			searchFirst()
		}
	})
	
	// 获取仓库
	const purchaseDemandWarehouseList = ref([])
	const getPurchaseDemandWarehouse = () => {
		purchaseDemandWarehouse({
			id: id.value
		}).then(res => {
			purchaseDemandWarehouseList.value = res.data.map(item => {
				return {
					...item,
					value: item.id,
					text: item.name
				}
			}) || []
		})
	}
	
	// 采购需求状态
	const allStatusList = ref([])
	const getPurchaseDemandStatus = () => {
		return purchaseDemandStatus().then(res => {
			allStatusList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		purchaseDemandDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 选择仓库
	const purchaseDemandWarehouseId = ref('')
	const changeWarehouse = (val) => {
		if (val) {
			getWarehouseProduct(val)
		} else {
			warehouseProductTableList.value = []
		}
	}
	const warehouseProductTableList = ref([])
	const warehouseProductColumns = ref([
		{ title: '商品数量', key: 'number', width: '120rpx' },
		{ title: '生产日期', key: 'productionDate', width: '180rpx' },
		{ title: '过期时间', key: 'expireDate', width: '180rpx' },
		{ title: '商品单位', key: 'unit' }
	])
	const getWarehouseProduct = (id) => {
		storageProduct({
			pageNum: 1,
			pageSize: 100,
			warehouseId: id,
			warehouseType: 'delivery'
		}).then(res => {
			warehouseProductTableList.value = res.rows || []
		})
	}
	
	// 需求商品
	const demandProductColumns = ref([
		{ title: '商品名称', key: 'productName' },
		{ title: '商品单位', key: 'unit', width: '220rpx' },
		{ title: '需求数量', key: 'demandNumber', width: '120rpx' }
	])
	
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const demandProductTableList = ref([])
	
	// 从第一页查询
	const searchFirst = () => {
		pageNum.value = 1
		demandProductTableList.value = []
		getList()
	}
	//页数切换
	const pageChange = (page) => {
		pageNum.value = page
		getList()
	}
	//每页条数切换
	const sizeChange = (size) => {
		pageSize.value = size
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			purchaseDemandId: id.value
		}
		if (pageNum.value > 1) {
			isLoading.value = true
			uni.showLoading({
				title: '数据加载中...'
			})
		}
		purchaseDemandProduct(params).then(res => {
			demandProductTableList.value = res.rows || []
			total.value = res.total
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
</script>

<style scoped lang="scss">
.detail-text-integral {
	margin-left: 20rpx;
}
.detail-text-banners {
	margin-left: -10rpx;
}
.detail-text-banner {
	margin: 0 10rpx 10rpx;
}
.detail-text-video {
	width: 100%;
	height: 250rpx;
}
</style>
